.Container {
  height: 100%;
  width: 100%;
  .HeadContainer {
    position: relative;
    height: 60 * $fontsizeUnit;
    width: 100%;
    background-image: url('../../../assets/maphomeimages/headImg.png');
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    background-color: rgb(2, 37, 46);
    display: flex;
    align-items: center;

    .HeadContainer-image {
      width: 50px;
      height: 50px;
      background-image: url('../../../assets/maphomeimages/logo.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-left: 20px;
    }

    .HeadContainer-text {
      width: 432px;
      height: 33px;
      font-size: 24px;
      font-family: Charter-Black, Charter;
      font-weight: 900;
      color: #ffffff;
      line-height: 30px;
      margin-left: 20px;
    }
  }
  &-content {
    position: relative;
    height: calc(100% - 60 * $fontsizeUnit);
    .ant-spin-text {
      color: #fff;
    }
    .ant-spin-dot-item {
      background-color: #fff;
    }
    .ant-spin-nested-loading,
    .ant-spin-container {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .Container-left {
      width: 458 * $fontsizeUnit;
      position: absolute;
      left: 20 * $fontsizeUnit;
      top: 0;
      height: 100%;
      z-index: 99;
      padding-top: 13 * $fontsizeUnit;
      padding-bottom: 16 * $fontsizeUnit;
      display: flex;
      flex-direction: column;
    }
    .Container-right {
      position: absolute;
      width: 458 * $fontsizeUnit;
      right: 20 * $fontsizeUnit;
      top: 0;
      height: 100%;
      z-index: 99;
      padding-top: 13 * $fontsizeUnit;
      padding-bottom: 16 * $fontsizeUnit;
      display: flex;
      flex-direction: column;
    }
    .MapItem {
      flex: 1;
      margin-top: 10 * $fontsizeUnit;
      &:first-child {
        margin-top: 0;
      }
      .MapCard {
        height: 100%;
        width: 100%;
      }
    }
    .Content-text {
      position: absolute;
      z-index: 99;
      color: white;
      font-size: 16px;
      font-weight: 700;
      bottom: 20px;
      left: 500px;
      white-space: wrap;
      text-overflow: ellipsis;
      span {
        font-size: 14px;
      }
    }
  }

  .home-container {
    height: 100%;
    width: 100%;
    z-index: 1;
    .openlayers-map {
      width: 100%;
      height: 100%;
    }
  }
}
